<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/element-ui/element-ui.css">
    <!-- 先引入 Vue -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script> -->
    <script src="static/vue.js"></script>
    <!-- 引入 http-vue-loader -->
    <script src="static/http-vue-loader.js"></script>
</head>

<body>
    <div id="app">
        {{visible}}

        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
          </el-row>
          
          <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
          </el-row>
          
          <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
          </el-row>
          
          <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </el-row>
        <input id="file" type="file" @change="xhUploadFile">
    </div>
</body>

<!-- 引入组件库 -->
<script src="static/element-ui/element-ui.js"></script>
<script>
    // 使用httpVueLoader
    Vue.use(httpVueLoader);

    const app = new Vue({
        el: '#app',
        data: function () {
            return { visible: false }
        },
        methods: {
            xhUploadFile(event) {
                console.log(event);
                console.log(event.target.files[0]);
            }
        },
    })
</script>

</html>